<template>
	<view class="details">
		<view class="img">
			<image :src="product_image" />
		</view>
		<view class="integral">
			<view><text>{{integral}}</text>积分</view>
			<text class="surplus">剩余：{{count}}个</text>
		</view>
		<view class="name">
			<view class="coupons">{{name}}</view>
			<view class="date">有效期：{{off_date}}</view>
		</view>
		<view class="exchange" @click="exchange()">立即兑换</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	export default {
		data() {
			return {
				name: '',
				product_image: '',
				count: '',
				off_date: '',
				integral: '',
				personInfo: '',
				id: '',
			}
		},
		onLoad(option) {
			console.log(option)
			this.name = option.name
			this.product_image = option.image
			this.count = option.count
			this.integral = option.integral
			this.off_date = option.off_date
			this.id = option.id
		},
		onShow() {
			this.personInfo = JSON.parse(uni.getStorageSync('userInfo'));
		},
		methods: {
			exchange() {
				api.exchangegood('redeem.product', '_api_exchange_product_one', this.personInfo.access_token, '1', this.id,
						this.personInfo.uid)
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
						this.count = res.number
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.details {
		.img {
			height: 600rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 66.66%;
				height: 75%;
			}
		}

		.integral {
			width: 690rpx;
			height: 100rpx;
			background: url(../../static/image/mine/points_details.png) no-repeat;
			margin: 0 auto;
			background-size: cover;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 26rpx;

			.price {
				margin-left: 18rpx;
				text-decoration: line-through;
			}

			.surplus {
				text-align: right;
				flex: 1;
				padding-right: 18rpx;
			}

			view {
				margin-left: 18rpx;

				text {
					font-size: 48rpx;
					font-weight: 600;
				}
			}
		}

		.name {
			margin-top: 45rpx;
			margin-left: 52rpx;

			.coupons {
				color: #333;
				font-size: 34rpx;
				font-weight: bold;
			}

			.date {
				font-size: 26rpx;
				color: #666666;
				margin-top: 16rpx;
			}
		}

		.exchange {
			color: #fff;
			width: 650rpx;
			height: 90rpx;
			background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
			border-radius: 10rpx;
			font-size: 34rpx;
			text-align: center;
			line-height: 90rpx;
			margin: 38rpx auto 0;
		}
	}
</style>
